<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="app">hello</div>
    </body>
    <script>
        // 模拟Vue中的data选项
        let data = {
            msg: "hello",
            count: 22,
        };
        // 模拟Vue实例
        let vm = new Proxy(data, {
            // 当访问vm的成员时会执行
            get(target, key) {
                console.log("get:", key, target[key]);
                return target[key];
            },
            // 当设置 vm 的成员时会执行
            set(target, key, newValue) {
                console.log(console.log("set:", key, newValue));
                if (target[key] === newValue) {
                    return;
                }
                target[key] = newValue;
                document.querySelector("#app").textContent = target[key];
            },
        });
    </script>
</html>
